<template>
	<view>
           <view class="u-demo-block">
               <text class="u-demo-block__title">基础使用</text>
               <view class="u-demo-block__content">

                   <u-row customStyle="margin-bottom: 10px">
                       <u-col span="4">
                           <view class="demo-layout bg-purple"></view>
                       </u-col>
                       <u-col span="4">
                           <view class="demo-layout bg-purple-light"></view>
                       </u-col>
                       <u-col span="4">
                           <view class="demo-layout bg-purple-dark"></view>
                       </u-col>
                   </u-row>
                   <u-row justify="space-between">
                       <u-col span="3">
                           <u-button type="primary" text="确定"></u-button>
                       </u-col>
                       <u-col span="3">
                           <view class="demo-layout bg-purple-light"></view>
                       </u-col>
                       <u-col span="3">
                           <view class="demo-layout bg-purple"></view>
                       </u-col>
                       <u-col span="3">
                           <view class="demo-layout bg-purple-light"></view>
                       </u-col>
                   </u-row>
               </view>
           </view>
	</view>

</template>

<script>
	export default {
		data() {
      return {

      }
		},
    methods:{

    }
	}
</script>

<style lang="scss" scoped>
   .wrap {
          padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>
